<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/wpui-admin/wp-ewallet-admin/static/plugin/layuimini/lib/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/wpui-admin/wp-ewallet-admin/static/plugin/layuimini/css/public.css" media="all">
    <link rel="stylesheet" href="/wpui-admin/wp-ewallet-admin/static/css/wp.css" media="all">

    <style>

        .input-block{
            margin-right: 50px;
        }

        .unit{
            position: absolute;
            right: 0px;
            top: 0px;
            right: -30px;
            line-height: 40px;
        }

        .layui-input-block{
            margin-left: 150px;
        }

        .layui-form-label{
            width: 120px;
        }

    </style>
</head>
<body>
<div id="container" class="layuimini-container">
    <div class="layuimini-main">
        <h2 class="wp-module-title">理财产品创建</h2>
        <div class="wp-module-box" style="left: 50%;position: relative;margin-left: -300px;width: 500px;">
            <form id="myform" class="layui-form" action="" lay-filter="example">
                <div class="layui-form-item">
                    <label class="layui-form-label">产品名称</label>
                    <div class="layui-input-block input-block">
                        <input v-model="finaProd.finaProdName" type="text" name="finaProdName" lay-verify="required|finaProdName" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">年化收益</label>
                    <div class="layui-input-block input-block">
                        <input v-model="finaProd.yieldRate" type="text" name="yieldRate" autocomplete="off" class="layui-input" lay-verify="required|yieldRate" oninput="this.value=this.value.replace(/\D/g,'');">
                        <div class="unit">%</div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">理财周期</label>
                    <div class="layui-input-block input-block">
                        <input v-model="finaProd.finaProdCycle" type="text" name="finaProdCycle" autocomplete="off" class="layui-input" lay-verify="required|finaProdCycle" oninput="this.value=this.value.replace(/\D/g,'');">
                        <div class="unit">天</div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">最低起购额</label>
                    <div class="layui-input-block input-block">
                        <input v-model="finaProd.minPurchAmount" type="text" name="minPurchAmount" autocomplete="off" class="layui-input" lay-verify="required|minPurchAmount" oninput="this.value=this.value.replace(/\D/g,'');">
                        <div class="unit" style="right: -55px;">SHQC</div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">是否允许提前赎回</label>
                    <div class="layui-input-block">
                        <input v-model="finaProd.isEarlyRedemp" type="radio" name="isEarlyRedemp" value="Y" title="允许">
                        <input v-model="finaProd.isEarlyRedemp" type="radio" name="isEarlyRedemp" value="N" title="不允许">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">冻结期</label>
                    <div class="layui-input-block input-block">
                        <input v-model="finaProd.freePeriod" type="text" name="freePeriod" autocomplete="off" class="layui-input" lay-verify="required|freePeriod" oninput="this.value=this.value.replace(/\D/g,'');">
                        <div class="unit">天</div>
                    </div>
                    <div class="layui-input-block input-block">
                        <div class="layui-form-mid layui-word-aux" style="left: 0px;">
                            <div class="layui-badge-dot layui-bg-orange" style="float: left;top:5px;"></div>
                            <div style="margin-left: 15px;">购买后多少天不能提前赎回，例：购买后90天内不能提前赎回，90天后可操作提前赎回</div>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">提前赎回本金折扣</label>
                    <div class="layui-input-block input-block">
                        <input v-model="finaProd.discountRate" type="text" name="discountRate" autocomplete="off" class="layui-input" lay-verify="required|discountRate" oninput="this.value=this.value.replace(/\D/g,'');">
                        <div class="unit">%</div>
                    </div>
                </div>
                <!--
                <div class="layui-form-item">
                    <label class="layui-form-label">返息时间</label>
                    <div class="layui-input-block input-block" style="margin-left: 140px;">
                        <div style="position: absolute;top:0px;left: -30px;line-height: 40px;">第</div>
                        <input type="text" name="password" autocomplete="off" class="layui-input">
                        <div class="unit">天</div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">产品说明</label>
                    <div class="layui-input-block">
                        <textarea class="layui-textarea"></textarea>
                    </div>
                </div>
                -->

                <div class="layui-form-item">
                    <div class="layui-input-block" style="margin: auto;text-align: center;padding-left:80px;">
                        <button type="submit" style="width: 120px;" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="data-submit-btn">提交</button>
                        <button type="button" style="width: 120px;" class="layui-btn layui-btn-normal" lay-filter="data-reset-btn" @click="resetEvent">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="/wpui-admin/wp-ewallet-admin/static/js/jquery-3.4.1.min.js"></script>
<script src="/wpui-admin/wp-ewallet-admin/static/plugin/layuimini/lib/layui/layui.js" charset="utf-8"></script>
<script src="/wpui-admin/wp-ewallet-admin/module/index/config.js" charset="utf-8"></script>
<script src="/wpui-admin/wp-ewallet-admin/global/wp.js" charset="utf-8"></script>
<script src="/wpui-admin/wp-ewallet-admin/static/js/vue.js" charset="utf-8"></script>
<script src="/wpui-admin/wp-ewallet-admin/static/js/vue-i18n.js" charset="utf-8"></script>
<script src="/wpui-admin/wp-ewallet-admin/global/wp-i18n.js" charset="utf-8"></script>
<script src="/wpui-admin/wp-ewallet-admin/global/wp-project.js" charset="utf-8"></script>
<script>
    layui.use(['form'], function () {
        var $ = layui.jquery,
            form = layui.form;

        var vm = new Vue({
            el: '#container',
            i18n: wp.i18n(),
            data: {
                finaProd: {
                    finaProdId : "",
                    finaProdName: "",
                    finaProdDesc: "",
                    prodType: "",
                    minPurchAmount: "",
                    yieldRate: "",
                    returnRateCycle: "",
                    finaProdCycle: "",
                    isEarlyRedemp: "Y",
                    freePeriod: "",
                    discountRate: "",
                }
            },
            mounted:function(){
                form.render();
                this.submitEvent();
            },
            methods: {
                submitEvent:function(){
                    var that = this;
                    // 需要的时候自定义验证规则
                    form.verify({
                        finaProdName:function(value){
                            if(!value){
                                return '产品名称不能为空';
                            }
                            if (value.length > 120) {
                                return '产品名称不能超过120个字符';
                            }
                        },
                        yieldRate:function(value){
                            if(!value){
                                return '年化收益率不能为空';
                            }
                            if (value < 0 || value > 100) {
                                return '年化收益率范围为0~100';
                            }
                        },
                        finaProdCycle:function(value){
                            if(!value){
                                return '理财周期不能为空';
                            }
                        },
                        freePeriod:function(value){
                            if(!value){
                                return '冻结期不能为空';
                            }
                            if(parseFloat(value) > parseFloat(that.finaProd.finaProdCycle)){
                                return '冻结期不能大于理财周期';
                            }
                        },
                        discountRate:function(value){
                            if(!value){
                                return '提前赎回本金折扣不能为空';
                            }
                            if (value < 0 || value > 100) {
                                return '提前赎回本金折扣范围为0~100';
                            }
                        },
                        minPurchAmount:function(value){
                            if(!value){
                                return '最低起购额不能为空';
                            }
                        }
                    });

                    // 监听提交操作
                    form.on('submit(data-submit-btn)', function (data) {
                        var result = data.field;
                        result.yieldRate = result.yieldRate/100;
                        result.discountRate = result.discountRate/100;
                        layer.confirm("确认提交?", {title:"提示信息",icon:0}, function(index) {
                            layer.close(index);
                            var loading = wp.loading();
                            wp.httpPost({
                                url: wp.url('/wp/ewallet/wmps/finaProd/saveFinaProdInfo'),
                                data: result,
                                success: function (data) {
                                    wp.closeLoading();
                                    layer.msg('创建成功');

                                    // 关闭窗口，刷新父窗口列表
                                    window.walletApplyVm.reloadGrid();
                                    window.close();
                                },
                                failure: function (data) {
                                    wp.closeLoading();
                                    layer.msg('创建失败');
                                }
                            });
                        });
                        return false;
                    });
                },
                resetEvent:function(){
                    // 监听重置按钮
                    $("#myform").get(0).reset();
                    $("input[name='isEarlyRedemp']").get(0).checked=true;
                }
            }
        });
    });
</script>

</body>
</html>